import React, { Component } from 'react'
// !#1 安装并导入包
import PropTypes, { string, number } from 'prop-types'

export default class Hello extends Component {
  // 【静态】
  static propTypes = {
    // 校验 colors 必须是一个数组
    colors: PropTypes.array.isRequired,
    // obj: PropTypes.object,
    // obj 里面必须包含字符串类型的 name 和 number 类型的 age
    obj: PropTypes.shape({
      name: string.isRequired,
      age: number.isRequired,
    }),
    jsxEle: PropTypes.element,
  }
  render() {
    return (
      <div>
        {this.props.jsxEle}
        <p>name: {this.props.obj.name}</p>
        <p>age: {this.props.obj.age}</p>
        <ul>
          {this.props.colors.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    )
  }
}

// !#2 组件.propTypes = {}
/* Hello.propTypes = {
  // 校验 colors 必须是一个数组
  colors: PropTypes.array,
} */
